<template>
	<view>
		<view v-if="showPopup" :class="[popupstyle, number ? 'uni-popup' + number : 'uni-popup']" @touchmove.stop.prevent="clear">
			<uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans" @click="hide" />
			<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="hide">
				<view class="uni-popup__wrapper-box" :class="[position + '_box', radius ? 'radius' : '']" @click.stop="clear">
					<slot />
				</view>
			</uni-transition>
		</view>
	</view>
</template>

<script>
	import uniTransition from './uni-transition/uni-transition.vue';
	import popup from './popup.js';
	/**
	 * PopUp 弹出层
	 * @description 弹出层组件，为了解决遮罩弹层的问题
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} position = [top|center|bottom] 弹出方式
	 * 	@value top 顶部弹出
	 * 	@value center 中间弹出
	 * 	@value bottom 底部弹出
	 * 	@value message 消息提示
	 * 	@value dialog 对话框
	 * 	@value share 底部分享示例
	 * @property {Boolean} animation = [ture|false] 是否开启动画
	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
	 */

	export default {
		name: 'popup',
		components: {
			uniTransition
		},
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			position: {
				type: String,
				default: 'center'
			},
			number: {
				type: String,
				default: '0'
			},
			radius: {
				type: Number,
				default: 0
			}
		},
		mixins: [popup],
		watch: {
			/**
			 * 监听type类型
			 */
			position: {
				handler: function(newVal) {
					this[this.config[newVal]]();
				},
				immediate: true
			}
		},
		data() {
			return {
				duration: 300,
				ani: [],
				showPopup: false,
				showTrans: false,
				maskClass: {
					position: 'fixed',
					bottom: 0,
					top: 0,
					left: 0,
					right: 0,
					backgroundColor: 'rgba(0, 0, 0, 0.4)'
				},
				transClass: {
					position: 'fixed',
					left: 0,
					right: 0
				},
				popupstyle: 'top'
			};
		},
		created() {
			if (this.animation) {
				this.duration = 300;
			} else {
				this.duration = 0;
			}
			this.showPopup = false;
		},
		
		methods: {
			clear(e) {
				// TODO nvue 取消冒泡
				e.stopPropagation();
			},
			show() {
				this.showPopup = true;
				let that = this;
				this.$nextTick(() => {
					new Promise(resolve => {
						clearTimeout(that.timer);
						that.timer = setTimeout(() => {
							that.showTrans = true;
							// fixed by mehaotian 兼容 app 端
							that.$nextTick(() => {
								resolve();
							});
						}, 50);
					}).then(res => {
						clearTimeout(that.msgtimer);
					});
				});
			},

			hide() {
				let that = this;
				this.showTrans = false;
				this.customClose();
				this.$nextTick(() => {
					if (that.timer) {
						clearTimeout(that.timer);
					}
					that.timer = setTimeout(() => {
						that.showPopup = false;
					}, 300);
				});
			},
			/**
			 * 顶部弹出样式处理
			 */
			top() {
				this.popupstyle = 'top';
				this.ani = ['slide-top'];
				this.transClass = {
					position: 'fixed',
					left: 0,
					right: 0
				};
			},
			/**
			 * 底部弹出样式处理
			 */
			bottom() {
				this.popupstyle = 'bottom';
				this.ani = ['slide-bottom'];
				this.transClass = {
					position: 'fixed',
					left: 0,
					right: 0,
					bottom: 0
				};
			},
			/**
			 * 中间弹出样式处理
			 */
			center() {
				this.popupstyle = 'center';
				this.ani = ['zoom-out', 'fade'];
				this.transClass = {
					position: 'fixed',
					/* #ifndef APP-NVUE */
					display: 'flex',
					flexDirection: 'column',
					/* #endif */
					bottom: 0,
					left: 0,
					right: 0,
					top: 0,
					justifyContent: 'center',
					alignItems: 'center'
				};
			}
		}
	};
</script>
<style scoped>
	.uni-popup,
	.uni-popup0 {
		position: fixed;
		/* #ifndef APP-NVUE */
		z-index: 900;
		/* #endif */
	}

	.uni-popup1 {
		position: fixed;
		/* #ifndef APP-NVUE */
		z-index: 910;
		/* #endif */
	}

	.uni-popup2 {
		position: fixed;
		/* #ifndef APP-NVUE */
		z-index: 920;
		/* #endif */
	}

	.uni-popup3 {
		position: fixed;
		/* #ifndef APP-NVUE */
		z-index: 930;
		/* #endif */
	}

	.uni-popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $uni-bg-color-mask;
		opacity: 0;
	}

	.mask-ani {
		transition-property: opacity;
		transition-duration: 0.2s;
	}

	.uni-top-mask {
		opacity: 1;
	}

	.uni-bottom-mask {
		opacity: 1;
	}

	.uni-center-mask {
		opacity: 1;
	}

	.uni-popup__wrapper {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
	}

	.top {
		top: 0;
		position: fixed;
		left: 0;
		width: 100%;
	}

	.bottom {
		bottom: 0;
		position: fixed;
		left: 0;
		width: 100%;
	}

	.bottom_box {
		background: #ffffff;
	}

	.radius {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.uni-popup__wrapper-box {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: relative;
		/* iphonex 等安全区设置，底部安全区适配 */
		/* #ifndef APP-NVUE */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
	}

	.content-ani {
		transition-property: transform, opacity;
		transition-duration: 0.2s;
	}

	.uni-top-content {
		transform: translateY(0);
	}

	.uni-bottom-content {
		transform: translateY(0);
	}

	.uni-center-content {
		transform: scale(1);
		opacity: 1;
	}
</style>
